<template>
	<view class="content">
		<view class="up">
			<view class="left">
				<view style="width: 70px;margin-left: 20px;font-size: 20px;color: #01AAFF;">基地：</view>
				<view class="left-option" @click="baseClick()">
					<view style="height: 100%;width: calc(100% - 40px);text-align: center;overflow: hidden;">{{baseName}}</view>
					<view style="width: 20px;height: 20px;margin-left: auto;margin-right: 10px;margin-top: 5px;">
						<image src="../static/icon_002.png" mode="aspectFit" style="width: 20px;height: 20px;"></image>
					</view>
				</view>
			</view>
			<view style="width: 60%;margin-left: auto;margin-right: auto;">
				<text
					style="font-size: 30px; background-image: linear-gradient(to right,#0072FF,#00EAFF,#01AAFF); -webkit-background-clip:text; color: transparent;">河南农大智慧农业监测系统</text>
			</view>
			<view style="width: 20%;margin-top: 15px;font-size: 20px;color: #01AAFF;text-align: left;" @click="goBack()">图表数据</view>
		</view>
		<view class="down">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
				<uni-tr style="display: flex;background-color: #48AE0A;">
					<uni-th style="color: #fff;"  :width="cellWidth" align="center" v-for="(item, index) in headData" :key="index">
						{{ item }}
					</uni-th>
				</uni-tr>
				<uni-tr style="display: flex;" v-for="(item, index) in tableData" :key="index">
					<uni-td :width="cellWidth" align="center" v-for="(item2, index2) in item" :key="index2">
						{{ item2 }}
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
		</view>
		<f-drop-menu style="position: absolute;top: 60px;left: 90px;" size="small" align='left' :value="menuShow"
			:list="baseList" @click="menuChoice" @change="handleChange"></f-drop-menu>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchVal: '',
				headData: [],
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				cellWidth: 0,
				windowWidth: 0,
				baseID: '',
				baseName: "",
				merchantID: "",
				menuShow: false,
				baseList: [],
			}
		},
		mounted() {
			// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.windowWidth = res.windowWidth-20;
				}
			})
		},
		onLoad(e) {
			this.baseID = e.baseID;
			this.baseName = e.baseName;
			this.merchantID = e.merchantID;
			this.selectedIndexs = []
			this.getBaseList();
			this.getData(1);
		},
		methods: {
			goBack() {
				uni.navigateBack({})
			},
			menuChoice(item, index) {
				console.log(item);
				this.baseName = item.name;
				this.baseID = item.id;
				this.getData(1)
			},
			handleChange(e) {
				console.log(e);
				this.topSelect = this.oldSelect;
				this.menuShow = e;
			},
			baseClick() {
				this.menuShow = true;
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			getBaseList() {
				let that = this;
				console.log(this.merchantID);
				this.$http.post({
					data: {
						cmd: "getBaseList",
						merchantId: that.merchantID,
						nowPage: 1,
						pageCount: 100
					}
				}).then(res => {
					if (res.statusCode == 200) {
						if (res.data.result == 0) {
							that.baseList = res.data.body.dataList;
						} else {
							that.$toast.show(res.data.resultNote);
						}
					} else {
						that.$toast.show('网络出错！');
					}
				});
			},
			// 获取数据
			getData(pageCurrent) {
				this.loading = true
				this.pageCurrent = pageCurrent
				let that = this;
				this.$http.post({
					data: {
						cmd: "getSensorRecordDataScreen",
						base_id: that.baseID,
						nowPage: pageCurrent,
						pageCount: that.pageSize
					}
				}).then(res => {
					if (res.statusCode == 200) {
						if (res.data.result == 0) {
							let head = res.data.body.head;
							that.cellWidth = that.windowWidth / head.length;
							that.headData = head;
							that.tableData = res.data.body.data;
							that.total = res.data.totalCount;
							that.loading = false;
						}
					}else {
						that.$msg('网络出错！');
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		// font-family: 微软雅黑, MicrosoftYahei, sans-serif;
		color: #fff;
		background: #ddd url(@/static/icon_000.png);
		background-size: 100% 100%;
		background-position: 0 0;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
	
	.up {
		width: 100%;
		height: 30px;
		text-align: center;
		margin-top: 10px;
		display: flex;
	}
	
	.left {
		display: flex;
		text-align: center;
		width: 20%;
		align-items: center;
		margin-top: 15px;
		height: 100%;
		// background-color: #007AFF;
	}
	
	.left-option {
		background: url(@/static/icon_001.png) center;
		background-repeat: no-repeat;
		font-size: 15px;
		line-height: 25px;
		text-align: left;
		width: calc(100% - 90px);
		height: 25px;
		color: #fff;
		display: flex;
	}
	
	.down {
		margin: 20px 10px 10px 10px;
		display: flex;
		flex-direction: column;
		height: calc(100% - 70px);
		width: calc(100% - 20px);
		background-color: #fff;
	}
</style>
